<template>
    <view class="container paddingBottomBar" v-if="data" :style="themeColor">
        <header-bar :config="config" @onClickBtn="onClickBtn"></header-bar>
        <view class="header-bg" :style="'top:' + navStatusBarHeight + 'px'"></view>
        <view class="main">
            <view class="order-item product-item product-project" @click="selType"
                v-if="IsSelectPostType == 1 && typeList.length > 0 && orderType != 23">
                <text class="title-text">配送方式</text>
                <view class="project-right">
                    <view>{{ PostTypeName == "" ? "请选择配送方式" : PostTypeName }}</view><uni-icons type="arrowright"
                        v-if="!relevanceTrue"></uni-icons>
                </view>
            </view>
            <view class="delivery-mode">
                <view class="tab" v-if="deliveryWays.length > 1">
                    <view class="tab-item" @click="selectDeliveryWay = item.id"
                        :class="selectDeliveryWay == item.id ? 'current' : ''" v-for="(item, index) in deliveryWays"
                        :key="index">
                        <image v-show="selectDeliveryWay == item.id && index != 0" class="tab-bg-right"
                            src="/static/img/tab_bg_right@2x.png"></image>
                        <text>{{ item.name }}</text>
                        <image v-show="selectDeliveryWay == item.id && index != deliveryWays.length - 1"
                            class="tab-bg-left" src="/static/img/tab_bg_left@2x.png"></image>
                    </view>
                    <view class="bg"></view>
                </view>
                <view v-else class="tab-mark"></view>
                <view class="delivery-mode-main" @click="goSelectAddress">
                    <view class="location-icon" v-if="false">
                        <uni-icons type="location-filled" customIcons="icon-white"></uni-icons>
                    </view>
                    <view class="info" v-if="getUseAddress">
                        <view class="info-name" v-if="orderType != 23">
                            <text>{{ getUseAddress.ContactName }} {{ getUseAddress.ContactTel }}</text>
                        </view>
                        <view v-else>
                            <view class="consignee">提货人：{{ getUseAddress.ContactName }} {{ getUseAddress.ContactTel }}
                            </view>
                            <view class="consignee takeTheir">
                                <view>自提点：{{ TakeDelivery.TakeDeliveryName }}</view>
                                <text>{{ TakeDelivery.AddressDetail }}</text>
                            </view>
                            <view class="consignee takeTheir borderNone">
                                <view>预计{{ HourNum + 24 }}小时后可提货</view>
                                <text class="tip">请按规定时间前往自提点取货，如有问题可联系团长为您解决</text>
                            </view>
                        </view>
                        <view class="location" v-if="orderType != 23">
                            <text class="location-text">{{ getUseAddress.ProvinceName ? getUseAddress.ProvinceName : ""
                                }}{{ getUseAddress.CityName ? getUseAddress.CityName : ""
                                }}{{ getUseAddress.AreaName ? getUseAddress.AreaName : ""
                                }}{{ getUseAddress.StreetName ? getUseAddress.StreetName : ""
                                }}{{ getUseAddress.ContactAddress ? getUseAddress.ContactAddress : "" }}</text>
                            <uni-icons type="arrowright" v-if="!relevanceTrue"></uni-icons>
                        </view>
                    </view>
                    <view class="info" v-else>
                        <view class="add-location">
                            <text class="location-text">+点击选择地址</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item">
                <view class="title-text flex-s-s flex-title" @click="$refs.policyPop.open()">
                    <view>商品清单</view>
                    <view class="right-box">
                        <view class="num-box">
                            <text class="order-desc">种类{{ classNum }},数量{{ getTotalNum() }}</text>
                            <view class="order-form">
                                <!-- <image src="/pages_shop/static/img/form.png" class="form-img"></image> -->点击这里，填写表单
                            </view>
                        </view>
                        <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                    </view>
                </view>
                <!-- <view class="order-item-main" @click="goUrl"> -->
                <view class="order-item-main" @click="$refs.policyPop.open()">
                    <view class="order-item-imgs" v-if="data.List">
                        <view class="img-item" v-for="(item, index) in showImgs" :key="index">
                            <image mode="aspectFill" :src="easyGetImgUrl(item)" class="order-item-img"></image>
                            <view class="order-item-name" v-if="itemname">{{ itemname }}</view>
                        </view>
                        <view v-if="imgs.length > 4">···</view>
                        <!-- <uni-icons type="more" v-if="imgs.length>3"></uni-icons> -->
                    </view>
                    <!-- <view class="right-box">
							<view class="num-box">
								<text class="order-desc">共{{classNum}}种</text>
								<text class="order-desc">数量{{getTotalNum()}}</text>
							</view>
							<uni-icons  type="arrowright" size="20" customIcons="icon-black"></uni-icons>
						</view> -->
                </view>
            </view>
            <view class="order-item product-item product-project" @click="seldeliveryDate"
                v-if="webInfo.IsSubmitDeliveryDate == 1">
                <text class="title-text">交货日期<text v-if="deliveryDate == ''"
                        style="font-weight: normal; color: #c4181f">(必填)</text></text>
                <view class="project-right">
                    <view>{{ deliveryDate }}</view><uni-icons type="arrowright"></uni-icons>
                </view>
            </view>
            <view class="order-item product-item" v-if="data.CouponList && data.CouponList.length > 0">
                <text class="title-text">优惠信息</text>
                <view class="coupon-item">
                    <view class="coupon-item-main" @click="goSelectCouponFn">
                        <image class="icon-coupon" src="/static/icon/icon_coupon.png"></image>
                        <view class="icon-coupon-name">
                            <text>优惠券</text>
                        </view>
                        <text class="no-use-coupon" :class="{ 'use-coupon': data.CouponList.length > 0 }"
                            v-if="isDefault">{{ data.CouponList.length }}张优惠券可用</text>
                        <text class="use-coupon" v-if="!isDefault && useCoupon">{{ useCoupon.V_Name }}</text>
                        <text class="no-use-coupon" v-if="!isDefault && !useCoupon">不使用优惠券</text>
                        <uni-icons class="icon-right" type="arrowright" size="24"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item product-item" v-if="points > 0 && data.MaxPoints > 0">
                <view class="coupon-item">
                    <view class="coupon-item-main">
                        <image class="icon-coupon" src="/static/icon/jifen.png"></image>
                        <view class="icon-coupon-name">
                            <text>可使用{{ points }}积分抵扣{{ pointMoney }}元</text>
                        </view>
                        <view>
                            <radio-group class="radiolist" @click="radioChange">
                                <radio color="#007e41" style="transform: scale(0.7)" v-if="!checked" />
                                <radio color="#007e41" style="transform: scale(0.7)" v-else checked="checked" />
                            </radio-group>
                            <!-- <iconsfont customIcons="icon-dagou" color="#000" size="30"></iconsfont> -->
                        </view>
                    </view>
                </view>
            </view>
            <view class="order-item product-item product-project" @click="selectProject"
                v-if="data.IsSelectProject == 1"><!-- @click="selectProject" -->
                <text class="title-text">关联项目</text>
                <view class="project-right">
                    <view>{{ project }}</view><uni-icons type="arrowright"></uni-icons>
                </view>
                <!-- <view class="project-right" @click="selProject"><view>{{project}}</view><uni-icons type="arrowright"></uni-icons></view> -->
            </view>
            <view class="order-item product-item product-project" @click="selectOrder"
                v-if="webInfo.IsSelectOrder == 1"><!-- @click="selectProject" -->
                <text class="title-text">关联订单(免运费)</text>
                <view class="project-right">
                    <view>{{ orderNum }}</view><uni-icons type="arrowright"></uni-icons>
                </view>
                <!-- <view class="project-right" @click="selProject"><view>{{project}}</view><uni-icons type="arrowright"></uni-icons></view> -->
            </view>
            <view class="order-item product-item">
                <text class="title-text">订单金额</text>
                <view v-if="!isLoading && data">
                    <order-submit-price :data="data" :points="points" :Integral="data.Integral" :pointMoney="pointMoney"
                        :checked="checked" :useCoupon="useCoupon" :postPrice="postPrice" :postDesc="postDesc"
                        @useCouponFn="useCouponFn" @payPriceFn="payPriceFn"></order-submit-price>
                </view>
            </view>

            <view class="order-item msg-item">
                <view class="order-item-title">买家留言({{ webInfo.IsSubmitRemark == 1 ? "必填" : "选填" }}）</view>
                <textarea v-model="remark" class="msg-input"
                    :placeholder="webInfo.RemarkTip ? webInfo.RemarkTip : '请在此处填写留言...'"
                    placeholder-class="placeholderClass"></textarea>
            </view>
            <view class="labelmain" v-if="labelList.length > 0">
                <view class="labelli" v-for="item in labelList" @click="labelSelect(item)">{{ item }}</view>
            </view>
            <order-bottom-bar v-if="!isLoading && data && payPrice" :carPolicyList="param.orderPolicy.carPolicyList"
                @action="action" :useAddress="getUseAddress" :orderData="data" :payList="payList" :ids="ids"
                :postPrice="postPrice" :isTempCar="isTempCar" @formNoEmptyChange="formNoEmptyChange" :webInfo="webInfo"
                :deliveryDate="deliveryDate" :postType="PostType" :TakeDelivery="TakeDelivery" :orderType="orderType"
                :postTypeName="PostTypeName" :projectId="projectId" :MainOrderId="MainOrderId"
                :project="data.IsSelectProject" :isUsePoint="checked" :activityId="activityId"
                :wareHouseId="wareHouseId" :PackageBuyId="PackageBuyId" :remark="remark" :payPrice="String(payPrice)"
                :useCoupon="useCoupon">
            </order-bottom-bar>
        </view>

        <uni-popup ref="policyPop" type="right" class="popupright" :safe-area="false">
            <view class="pop-pro-list" :style="'height:' + systemInfo.windowHeight + 'px'">
                <header-bar :config="config1"></header-bar>
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="arrowleft" @click="poPclose()"> </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <order-submit-list v-for="(item, index) in data.List" :key="index" :formNoEmpty="formNoEmpty"
                        :item="item" @changePolicy="changePolicy"></order-submit-list>
                </scroll-view>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="addresslist" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择关联项目</text></view>
                <scroll-view scroll-y="true" class="add-pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in data.ProjectList"
                            @click="selectaddress(item, index)">
                            <text>{{ item.ProjectName }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="canceladdresslist">取消</button>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="typelistpop" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择配送方式</text></view>
                <scroll-view scroll-y="true" class="add-pay-way-scroll">
                    <view class="pay-way">
                        <view class="pay-way-item" v-for="(item, index) in typeList" @click="selecttype(item, index)">
                            <text>{{ item.Name }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="canceltypelist">取消</button>
            </view>
        </uni-popup>
        <uni-calendar :date="deliveryDate" :start-date="startDate" ref="deliveryDateTip" :insert="false"
            @confirm="confirmStarDate">
        </uni-calendar>
    </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex"
import orderBottomBar from "@/pages_shop/components/order/order-bottom-bar.vue"
import orderSubmitList from "@/pages_shop/components/order/order-submit-list.vue"
import orderSubmitPrice from "@/pages_shop/components/order/order-submit-price.vue"
import { getPlatform } from "@/uni-sub-base/utils/platformUtil.js"
import utils from "@/utils/utils.js"
import { getProductDataBySubmit, GetPostageTypeList, GetRemarkLabelList } from "@/service/api/order.js"
import { getCartTotal, getUserCarList } from "@/utils/cartUtil.js"
import { getReceivingAddressList, StatisPostageMoneyByUserCar } from "@/service/api/member.js"
import { getList } from "@/service/api/businessPay.js"
import { GetUserDefaultTakeDelivery } from "@/service/api/takeDelivery.js"
import { GetAppointmentHourNum } from "@/service/api/communtiyGroup.js"
import storage from "@/uni-sub-base/utils/storage.js"
import utilsOld from "@/utils/utilsOld.js"
export default {
    components: {
        orderBottomBar,
        orderSubmitPrice,
        orderSubmitList,
    },
    data() {
        return {
            config: {
                title: "提交订单",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
            },
            config1: {
                title: "提交订单",
                back: false,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            checked: false,
            itemname: "", //单个商品显示名称
            selectDeliveryWay: "1",
            deliveryWays: [
                {
                    id: "1",
                    name: "快递物流",
                },
                // {
                // 	id: "2",
                // 	name: "商家配送"
                // },
            ],
            ids: "",
            data: null,
            payList: [],
            addressData: [],
            useAddress: null,
            param: {},
            isFrist: true,
            isLoading: false,
            isCar: true,
            postPrice: 0,
            postDesc: [],
            isTempCar: false,
            remark: "",
            tabIndex: 0,
            imgs: [],
            showImgs: [],
            classNum: 0,
            payPrice: null,
            useCoupon: null,
            isShowCouponTip: false,
            activityId: "0",
            points: null,
            systemInfo: {},
            isDefault: true,
            navStatusBarHeight: null,
            deliveryDate: "",
            project: "请选择关联项目",
            orderNum: "请选择要关联的订单",
            relevanceTrue: false,
            MainOrderId: 0,
            projectId: 0,
            posttype: "请选择配送方式",
            PostType: 0,
            PostTypeName: "",
            IsSelectPostType: 0,
            typeList: [],
            labelList: [],
            orderType: 0,
            TakeDelivery: {},
            end_time: "",
            HourNum: "",
            webInfo: {},
            startDate: "",
            formNoEmpty: false,
            isUsePointOption: true,
            pointMoney: 0,
            wareHouseId: "",
            PackageBuyId: "",
        }
    },
    onLoad(e) {
        this.ids = e.ids
        this.isTempCar = e.isTempCar == 1 ? true : false
        if (e.activityId) {
            this.activityId = e.activityId
        }
        if (e.orderType) {
            this.orderType = +e.orderType
        }
        if (e.wareHouseId) {
            this.wareHouseId = e.wareHouseId
        }
        if (e.from) {
            this.config.back = false
            this.config.leftButton = [{ key: "btn1", icon: "&#xe679;", position: "left" }]
        }
        if (e.PackageBuyId) {
            this.PackageBuyId = e.PackageBuyId
        }
    },
    watch: {
        getUseAddress(e) {
            this.getPostage()
        },
        //监听更新
        getUpRemarkView(e) {
            this.getData()
        },
    },
    computed: {
        ...mapGetters(["getUseAddress", "getUpRemarkView"]),
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
        this.config1.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        this.end_time = utils.getDateStr(null, 1) //明天
        let webInfo = storage.getCache("webInfo")
        this.webInfo = webInfo
        if (webInfo.IsSubmitDeliveryDate == 1) {
            if (webInfo.DefaultDeliveryDate) {
                this.deliveryDate = webInfo.DefaultDeliveryDate
                this.startDate = this.deliveryDate
            } else {
                this.startDate = utilsOld.dateFomat("yyyy-mm-dd", new Date())
            }
        }
        this.IsSelectPostType = webInfo.IsSelectPostType
        if (webInfo.IsSelectPostType != 0) {
            this.GetPostTypeList()
        }
        let userId = storage.getCache("userInfo").UserId
        if (!this.isTempCar) {
            this.param = {
                carUserId: userId,
                carIds: this.ids,
                isTempCar: false,
                orderPolicy: {
                    carPolicyList: [],
                    orderGiftList: [],
                },
                infoType: 0,
                orderType: 4,
            }
        } else {
            this.param = {
                carUserId: userId,
                orderPolicy: {
                    carPolicyList: [],
                    orderGiftList: [],
                },
                infoType: 0,
                orderType: 4,
                isTempCar: true,
                orderType: 4,
            }
            // if(this.activityId){
            // 	this.param.orderType = 21
            // }
        }
        if (this.orderType > 0) {
            this.param.orderType = this.orderType
        }
        this.getData()
        this.getAddress()
        this.GetRemarkLabelList()
        this.GetUserDefaultTakeDelivery() //默认自提点
        this.GetAppointmentHourNum()
        // this.getPayList()
        let systemInfo = uni.getSystemInfoSync()
        this.systemInfo = systemInfo
        //状态栏高度
        let statusBarHeight = Number(systemInfo.statusBarHeight)
        let menu = uni.getMenuButtonBoundingClientRect()
        //导航栏高度
        let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
        //状态栏加导航栏高度
        this.navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
        if (getPlatform() != "ios") {
            this.navStatusBarHeight = this.navStatusBarHeight - 5
        }
    },
    methods: {
        ...mapMutations(["SET_USE_ADDRESS"]),
        onClickBtn(data) {
            if (this.orderType == 24) {
                this.easyGoBack()
            } else {
                this.easyGoTo("/pages/cart/index")
                getUserCarList((res) => { })
            }
        },
        GetPostTypeList() {
            GetPostageTypeList().then((res) => {
                if (res.State && res.Data) {
                    this.typeList = res.Data
                    setTimeout((e) => {  // 默认选中第一个配送方式
                        this.selecttype(this.typeList[0])
                    }, 200)
                }
            })
        },
        GetUserDefaultTakeDelivery() {
            GetUserDefaultTakeDelivery({}).then((res) => {
                if (res.State == 1) {
                    this.TakeDelivery = res.Data
                }
            })
        },
        GetAppointmentHourNum() {
            GetAppointmentHourNum().then((res) => {
                if (res.State == 1) {
                    this.HourNum = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        goUrl() {
            this.easyGoTo(
                "/pages_shop/packet/order/commodityList?param=" + JSON.stringify(this.param) + "&ids=" + this.ids,
            )
        },
        getPostage() {
            if (this.data && this.getUseAddress) {
                let path = `?car_ids=${this.ids}&province_id=${this.getUseAddress.ProvinceId}&city_id=${this.getUseAddress.CityId}&area_id=${this.getUseAddress.AreaId}&postage_temp_id=0`
                let param = {
                    carIds: this.ids ? this.ids : "",
                    provinceId: this.getUseAddress.ProvinceId,
                    cityId: this.getUseAddress.CityId,
                    areaId: this.getUseAddress.AreaId,
                    isTempCar: this.isTempCar,
                }
                if (this.PostType) {
                    param.PostageTempId = this.PostType
                }
                let webInfo = storage.getCache("webInfo")
                if (webInfo.IsSelectWarehouse == 1) {
                    let warehouse = storage.getCache("warehouse")
                    param.warehouseId = warehouse.WarehouseId
                }
                if (this.wareHouseId) {
                    param.warehouseId = this.wareHouseId
                }
                StatisPostageMoneyByUserCar(param, path).then((res) => {
                    if (res.State && res.Data) {
                        if (this.relevanceTrue) {
                            this.postPrice = 0
                        } else {
                            this.postPrice = res.Data.Value
                        }
                        this.postDesc = res.Data.Details
                    }
                })
            }
        },
        goSelectAddress() {
            if (this.relevanceTrue) {
                return
            }
            if (this.orderType != 23) {
                let path = this.getUseAddress ? this.getUseAddress.ID : 0
                this.easyGoTo("/pages_me/packet/address/index?from=select&selectId=" + path)
            }
        },
        change(id) {
            this.selectDeliveryWay = id
        },
        getData() {
            this.isLoading = true
            let webInfo = storage.getCache("webInfo")
            if (webInfo.IsSelectWarehouse == 1) {
                let warehouse = storage.getCache("warehouse")
                this.param.warehouseId = warehouse.WarehouseId
            }
            if (this.wareHouseId) {
                this.param.warehouseId = this.wareHouseId
            }
            if (this.PackageBuyId) {
                this.param.PackageBuyId = this.PackageBuyId
            }
            getProductDataBySubmit(this.param).then((res) => {
                if (res.Data && res.Data.List) {
                    this.data = res.Data
                    const { IsUsePointOption, MaxPointMoney, MaxPoints, UserPointMoney, UserPoints } = res.Data
                    this.isUsePointOption = IsUsePointOption
                    this.points = UserPoints > MaxPoints ? MaxPoints : UserPoints
                    this.pointMoney = UserPointMoney > MaxPointMoney ? MaxPointMoney : UserPointMoney
                    this.checked = !IsUsePointOption
                    if (this.isFrist) {
                        this.data.List.forEach((e) => {
                            e.CarList.forEach((car) => {
                                let obj = {
                                    CarId: car.ID,
                                    PolicyId: e.PolicyId,
                                }

                                this.param.orderPolicy.carPolicyList.push(obj)
                            })
                        })
                        this.isFrist = false
                    }
                    if (!this.ids) {
                        let ids = ""
                        this.param.orderPolicy.carPolicyList.forEach((e) => {
                            ids = ids + e.CarId + ","
                        })
                        this.ids = ids
                        this.ids = this.ids.slice(0, this.ids.length - 1)
                    }
                    this.getImageList(this.data.List)
                    this.getPostage()

                    if (this.data.CouponList && this.data.CouponList.length > 0) {
                        // this.useCoupon = this.data.CouponList[0]
                    }
                }
                this.isLoading = false
            })
        },
        //获取收货地址
        getAddress() {
            let param = {
                searchKey: "",
            }
            getReceivingAddressList(param).then((res) => {
                if (res.Data && res.Data.length > 0) {
                    let hasDefalut = false
                    res.Data.forEach((e) => {
                        if (e.IsDefault) {
                            hasDefalut = true
                            this.SET_USE_ADDRESS(e)
                        }
                    })
                    if (!hasDefalut) {
                        this.SET_USE_ADDRESS(res.Data[0])
                    }
                } else {
                    //还没有设置地址
                    this.SET_USE_ADDRESS(null)
                }
            })
            this.getPostage()
        },
        GetRemarkLabelList() {
            GetRemarkLabelList().then((res) => {
                if (res.State == 1) {
                    this.labelList = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //获取支付方式
        getPayList() {
            let param = {}
            getList(param).then((res) => {
                this.payList = res.Data
            })
        },
        //更新选择优惠
        changePolicy(item) {
            let hasIn = false
            let carPolicyList = this.param.orderPolicy.carPolicyList

            if (carPolicyList.length > 0) {
                carPolicyList.forEach((e) => {
                    if (e.CarId == item.CarId) {
                        hasIn = true
                        e.PolicyId = item.PolicyId
                    }
                })
            }
            if (!hasIn) {
                carPolicyList.push(item)
            }
            this.getData()
        },
        getImageList(list) {
            let arr = []
            if (list) {
                list.forEach((e) => {
                    if (e.CarList) {
                        e.CarList.forEach((item) => {
                            arr.push(item.V_ThumbnailUrl160)
                        })
                    }
                })
            }
            if (list[0] && list[0].CarList.length == 1 && list.length == 1) {
                this.itemname = list[0].CarList[0].V_Title
            }
            this.imgs = arr
            this.showImgs = arr.slice(0, 4)
        },
        getTotalNum() {
            let num = 0
            let allClass = []
            this.data.List.forEach((e) => {
                if (e.CarList) {
                    e.CarList.forEach((item) => {
                        num += item.Amount
                        allClass.push(item.ProductId)
                    })
                }
            })

            this.$nextTick(() => {
                this.classNum = allClass.length
            })

            return parseFloat(Number(num).toFixed(6))
        },
        payPriceFn(price) {
            this.payPrice = price
            this.$forceUpdate()
        },
        useCouponFn(useCoupon) {
            this.useCoupon = useCoupon
            this.$forceUpdate()
        },
        goSelectCouponFn() {
            let id = ""
            if (this.useCoupon) {
                id = String(this.useCoupon.ID)
            }
            uni.navigateTo({
                url:
                    "/pages_me/packet/coupon/select?id=" +
                    id +
                    "&coupons=" +
                    encodeURIComponent(JSON.stringify(this.data.CouponList)),
                events: {
                    selectEvent: (data) => {
                        this.isDefault = false
                        this.useCoupon = data
                    },
                },
            })
        },
        getCouponPrice(coupon) {
            let price = 0
            if (coupon.V_PrivilegeWay == 0) {
                //算折扣
                price = this.payPrice
            } else {
                //抵用
                price = coupon.CouponPrivilegeValue
            }
            return price
        },
        radioChange(evt) {
            if (this.isUsePointOption) {
                // false表示强制选中，true是可选
                this.checked = !this.checked
            }
        },
        action() { },
        selProject() {
            this.$refs.addresslist.open()
        },
        selType() {
            if (this.relevanceTrue) {
                return
            }
            this.$refs.typelistpop.open()
        },
        canceladdresslist() {
            this.$refs.addresslist.close()
        },
        canceltypelist() {
            this.$refs.typelistpop.close()
        },
        selectaddress(item, index) {
            this.project = item.ProjectName
            this.projectId = item.ID
            this.$refs.addresslist.close()
        },
        selecttype(item, index) {
            this.PostTypeName = item.Name
            this.PostType = item.ID
            this.$refs.typelistpop.close()
            this.getPostage()
        },
        labelSelect(item) {
            if (this.remark == "") {
                this.remark = this.remark + item
            } else {
                this.remark = this.remark + "," + item
            }
        },
        seldeliveryDate() {
            this.$refs.deliveryDateTip.open()
        },
        confirmStarDate(e) {
            //选择交货日期
            this.deliveryDate = e.fulldate
        },
        formNoEmptyChange(e) {
            this.formNoEmpty = true
            this.$refs.policyPop.open()
        },
        poPclose() {
            this.$refs.policyPop.close()
            setTimeout((e) => {
                this.formNoEmpty = false
            }, 500)
        },
        selectProject() {
            var that = this
            uni.navigateTo({
                url: "/pages_me/packet/project/index",
                events: {
                    getSelectData: (data) => {
                        that.project = data.ProjectName
                        that.projectId = data.ID
                    },
                },
            })
        },
        selectOrder() {
            var that = this
            uni.navigateTo({
                url: "/pages_me/packet/project/relevance",
                events: {
                    getSelectData: (data) => {
                        data.ID = data.AddressId
                        that.SET_USE_ADDRESS(data)
                        that.relevanceTrue = true
                        that.orderNum = data.Sn
                        that.MainOrderId = data.OrderId
                        that.PostTypeName = data.PostTypeName
                        that.PostType = data.PostType
                    },
                },
            })
        },
    },
}
</script>

<style lang="scss">
.order-item {
    background: $color-white;
    margin-bottom: 20rpx;
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .flex-title {
        align-items: center;

        .right-box {
            font-weight: normal;

            .num-box {
                align-items: flex-end;
            }
        }
    }
}

.container {
    // padding-left: $app-page-padding;
    // padding-right: $app-page-padding;
    padding-top: $app-page-padding;

    .delivery-mode {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-bottom: 20rpx;

        .delivery-mode-header {
            display: flex;
            flex-direction: row;
            height: 90rpx;
            border-bottom: solid 1rpx $color-gray-4;
            padding: 0 $app-page-padding;
            align-items: center;

            .radio-box {
                display: flex;
                flex: 1;
                flex-direction: row;
                justify-content: flex-end;

                .radio-item {
                    height: 90rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 10rpx;
                }

                .current {
                    position: relative;

                    &:after {
                        content: "";
                        position: absolute;
                        bottom: 0rpx;
                        left: 50%;
                        border-width: 0 14rpx 14rpx;
                        border-style: solid;
                        border-color: transparent transparent $color-gray-4;
                    }
                }
            }
        }

        .delivery-mode-main {
            display: flex;
            flex-direction: row;
            padding: $app-page-padding;
            border-radius: 0 0 16rpx 16rpx;
            background: $color-white;

            .location-icon {
                width: 44rpx;
                height: 44rpx;
                border-radius: 40rpx;
                margin-right: 20rpx;
                background: $app-color-main;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 5rpx;
            }

            .info {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: center;

                .info-name {
                    margin-bottom: 12rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    text {
                        font-size: $font-size-32;
                        color: $color-black;
                        font-weight: 700;
                    }

                    .info-name-label {
                        color: $app-color-text-tip;
                    }
                }

                .location {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 10rpx;

                    .location-text {
                        align-items: center;
                        display: flex;
                        flex: 1;
                        color: $app-color-text-desc;
                        line-height: 38rpx;
                        margin-right: 20rpx;
                        font-size: $font-size-24;
                        margin-bottom: 0;
                    }
                }

                .add-location {
                    margin: 12rpx 64rpx;
                    display: flex;
                    height: 72rpx;
                    align-items: center;
                    justify-content: center;
                    border: 4rpx dashed #dbdcdb;

                    text {
                        color: $app-color-text-desc;
                        font-size: $font-size-28;
                    }
                }
            }
        }
    }
}

.msg-item {
    padding: $app-page-padding;
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .msg-input {
        display: flex;
        margin-top: $app-page-padding;
        display: flex;
        height: 150rpx;
        background: #f7f7f7;
        border-radius: $border-radius-10;
        padding: 10rpx;
        width: calc(100% - 20rpx);
    }

    .order-item-title {
        font-size: 28rpx;
    }
}

.tab {
    display: flex;
    flex-direction: row;
    height: 76rpx;
    position: relative;

    .tab-item {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;

        text {
            color: #4d4d4d;
        }

        position: relative;
        z-index: 1;
    }

    .bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70rpx;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16rpx 16rpx 0 0;
    }

    .current {
        text {
            height: 76rpx;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            background: $color-white;
            border-radius: 16rpx 16rpx 0 0;
            color: $app-color-main;
            font-weight: 700;
            font-size: $font-size-32;
            position: relative;
            z-index: 0;
        }
    }

    .tab-bg-left {
        width: 56rpx;
        height: 76rpx;
        position: absolute;
        right: -32rpx;
        bottom: 0;
        z-index: 10;
    }

    .tab-bg-right {
        width: 58rpx;
        height: 76rpx;
        position: absolute;
        left: -32rpx;
        bottom: 0;
    }
}

.tab-mark {
    height: 16rpx;
    border-radius: 16rpx 16rpx 0 0;
    background: $color-white;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 500rpx;
    background: linear-gradient(180deg, $app-color-main 0%, #f5f5f5 100%);
    z-index: 0;
}

.main {
    position: relative;
    padding-left: $app-page-padding;
    padding-right: $app-page-padding;
    padding-bottom: $app-page-padding;
    z-index: 1;
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            flex: 1;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .order-desc {
        font-size: 20rpx;
    }

    .order-form {
        display: flex;
        font-size: 20rpx;
        color: #999;
    }

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .form-img {
            width: 43.5rpx;
            height: 28rpx;
            position: relative;
            animation: animate_point 1s infinite;
            margin-right: 16rpx;
        }

        @keyframes animate_point {
            0% {
                left: 0;
            }

            50% {
                left: 16rpx;
            }

            100% {
                left: 0;
            }
        }
    }
}

.pop-pro-list {
    background: #f1f1f1;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-radius: 24rpx 24rpx 0 0;
        border-bottom: solid 12rpx #f1f1f1;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: calc(100vh - 240rpx);
    }
}

.popupright {
    .icon-close {
        right: auto !important;
        left: 24rpx;
        color: $color-gray-3;
    }
}

.coupon-item {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .coupon-item-main {
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-coupon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .icon-coupon-name {
            flex: 1;
        }

        .no-use-coupon {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }

        .use-coupon {
            color: $color-orange-1;
            font-size: $font-size-24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 60%;
        }

        .icon-right {
            margin-left: 8rpx;
        }
    }

    .coupon-item-desc {
        text {
            color: $app-color-text-tip;
            font-size: $font-size-24;
        }
    }
}

.product-project {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-text {
        border-bottom: none;
        margin-bottom: 0;
        padding: 0;
    }

    .project-right {
        display: flex;
        align-items: center;

        view {
            font-size: 24rpx;
            color: #666;
            padding-right: 6rpx;
            font-weight: normal;
        }
    }
}

.add-pay-way-scroll {
    max-height: 50vh;
}

.labelmain {
    padding: 24rpx 24rpx 36rpx 24rpx;
    font-size: 24rpx;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    view {
        white-space: nowrap;
        font-size: 26rpx;
        margin-right: 24rpx;
        margin-bottom: 20rpx;
    }

    .labelli {
        font-size: 24rpx;
        padding: 10rpx 14rpx;
        border-radius: 10rpx;
        border: 1rpx solid #ccc;
        color: #333;
    }
}

.consignee {
    padding-bottom: 26rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    border-bottom: 2rpx solid #ebebeb;
}

.takeTheir {
    padding-top: 20rpx;

    view {
        padding-bottom: 18rpx;
    }

    text {
        font-size: 24rpx;
        color: rgba(51, 51, 51, 0.64);
    }

    .tip {
        height: 60rpx;
        background: #fcf7f7;
        border-radius: 0px 0px 16rpx 16rpx;
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0;
        font-size: 24rpx;
        color: #e01212;
        font-weight: normal;
    }
}

.borderNone {
    border: none;
}

/deep/.uni-calendar__backtoday {
    display: none;
}
</style>
